<template>
  <div class="container">
    <!-- <h1>Person</h1> -->
    <div class="box">
      <el-card :body-style="{ padding: '0px' }">
        <div>
          <div style="width: 360px; height: 30px">
            <!-- <h2>个人信息</h2> -->
            <el-icon
              size="30"
              color="rgb(115.2, 117.6, 122.4)"
              style="cursor: pointer"
              @click="$router.push('/home')"
              ><Back
            /></el-icon>
          </div>
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <!-- <el-upload action="#" :show-file-list="false" :auto-upload="false" >  -->
            <div
              style="
                display: flex;
                width: 150px;
                height: 150px;
                border-radius: 50%;
                background-color: grey;
                position: relative;
              "
            >
              <span
                style="
                  display: inline-block;
                  vertical-align: middle;
                  line-height: 150px;
                  width: 150px;
                  height: 150px;
                  border-radius: 50%;
                  background-color: #f2f3f5;
                  text-align: center;
                "
                @mouseenter="handleEnter"
                @mouseleave="handleLeave"
              >
                <img
                  :src="
                    personData.avatar ||
                    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                  "
                  style="width: 150px; height: 150px; border-radius: 50%"
                />

                <!-- 图标部分，使用绝对定位并居中 -->
                <div
                  v-show="isHovered"
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                    background-color: black;
                    opacity: 0.5;
                  "
                >
                  <span style="padding: 5px">
                    <el-upload
                      action="http://localhost:8080/api/file/upload"
                      :beforeUpload="beforeUpload"
                      :headers="{ Authorization: token }"
                      :data="{ userId: userId }"
                      :show-file-list="false"
                      :on-success="handleSuccess"
                    >
                      <el-icon size="22" color="white"><Refresh /></el-icon>
                    </el-upload>
                  </span>
                  <span
                    style="padding: 5px; cursor: pointer"
                    @click="dialogVisible = true"
                  >
                    <!-- <el-icon><ZoomIn /></el-icon> -->
                    <el-icon size="22" color="white"><ZoomIn /></el-icon>
                  </span>
                  <span
                    style="padding: 5px; cursor: pointer"
                    @click="personData.avatar = ''"
                  >
                    <el-icon size="22" color="white"><Delete /></el-icon>
                  </span>
                </div>
              </span>
            </div>
            <!-- </el-upload> -->
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 10px;
            "
          >
            <el-form
              style="margin-top: 0px"
              :model="personData"
              :rules="formRules"
              :hide-required-asterisk="true"
            >
              <el-form-item label="姓名" prop="name">
                <!-- <span v-show="!isName">{{ personData.name }}</span> -->
                <!-- <span > -->
                <el-input v-model="personData.name" />
                <!-- <el-button type="text" @click="isName=false">取消</el-button> -->
                <!-- <el-button>11</el-button> -->
                <!-- </span> -->
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <!-- <el-input v-model="personData.gender"></el-input> -->
                <el-radio-group v-model="personData.gender">
                  <el-radio :value="1" style="color: skyblue">♂</el-radio>
                  <el-radio :value="0" style="color: pink">♀</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="personData.phone"></el-input>
                <!-- <span>{{ personData.phone }}</span> -->
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="personData.email"></el-input>
                <!-- <span>{{ personData.email }}</span> -->
              </el-form-item>
              <el-form-item label="地址" prop="address">
                <!-- <span>{{ personData.address }}</span> -->
                <el-input v-model="personData.address"></el-input>
              </el-form-item>
              <el-form-item
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-button
                  type="primary"
                  style="width: 150px; margin: 0 auto"
                  @click="submit"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog v-model="dialogVisible">
      <div style="display: flex; justify-content: center; align-items: center">
        <img
          :src="
            personData.avatar ||
            'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
          "
          alt="Preview Image"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

import { edit, getMessage } from "@/api/person";
const user = JSON.parse(localStorage.getItem("user"));
const userId = JSON.parse(localStorage.getItem("user")).id;
const token = JSON.parse(localStorage.getItem("user")).token;
const dialogVisible = ref(false);
const isName = ref(false);
const personData = ref({
  name: "",
  gender: "",
  phone: "",
  email: "",
  address: "",
  avatar: "",
  userId: "",
});
console.log(userId);
const isHovered = ref(false);
// const imgUrl=ref('');

const id = parseInt(user.id);
// console.log(id);
const getMessages = async () => {
  const res = await getMessage(id);
  personData.value = res.data;
  // console.log(res);
};
getMessages();

const handleEnter = () => {
  isHovered.value = true;
};
const handleLeave = () => {
  isHovered.value = false;
};
const handleSuccess = (res) => {
  // console.log(res);
  personData.value.avatar = res.data;
};
const beforeUpload = (file) => {
  //限制文件大小
  const maxSize = 3 * 1024 * 1024; //限制3M
  if (file.size > maxSize) {
    ElMessage.warning("文件大小不得超过3M");
    return false;
  }
  //限制文件格式
  const accept = ".jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF";
  const isAccept = accept.split(",").some((item) => file.name.endsWith(item));
  if (!isAccept) {
    ElMessage.warning("文件格式不正确");
    return false;
  }
};
const formRules = reactive({
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      message: "请输入合法手机号/电话号",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
  ],
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 4, max: 16, message: "长度在 4 到 16 个字符", trigger: "blur" },
  ],
  address: [
    // { required: true, message: '请输入地址', trigger: 'blur' },
    // { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
  ],
});
const submit = async () => {
  console.log(personData.value);
  personData.value.userId = userId;
  const res = await edit(personData.value);
  // console.log(res);
  console.log(res);
  if (res.code === 200) {
    ElMessage.success("修改成功");
    // setTimeout(() => {
    //   window.location.href = '/home';
    // }, 1000);
  } else {
    ElMessage.error("修改失败");
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  /* background-color: blueviolet; */
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 360px;
  height: 500px;
}
.box .el-card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
</style>